import React, {Component} from 'react';
import PropTypes from 'prop-types';
import './scss/LazyLoadImage.scss'

export default class LazyLoadImage extends Component {
    constructor (props) {
        super(props);
        this.state = {
            load: false,
            src: this.props.src
        };
    }

    imageOnLoad = () => {
        this.setState({load: true});
    };

    render () {
        if (this.state.load === true) {
            return <img src={this.props.src} alt={'lazy load'}/>;
        }
        let image = new Image();
        image.src = this.props.src;
        image.onload = this.imageOnLoad;
        return (
            <div className='md-loader'>
                <div className="md-spinner"/>
            </div>
        );
    }
}

LazyLoadImage.propTypes = {
    src: PropTypes.string
};
